import 'package:flutter/material.dart';
import 'package:x3_component_core/components/button_components/base_bottom_sheet_button_bar.dart';
import 'package:x3_component_core/components/button_components/base_custom_checkbox_button.dart';
import 'package:x3_component_core/components/selector_components/selector_template/bottom_sheet_head.dart';
import 'package:x3_component_core/controller/base_bottom_sheet_multiple_controller.dart';
import 'package:x3_component_core/models/base_bottom_sheet_selector_model.dart';
import 'package:x3_component_core/utils/base_component_utils.dart';

/// 默认多选模板
class BaseBottomSheetMultipleTemplate extends StatefulWidget {
  final BaseBottomSheetMultipleController controller;
  final Function(List<BaseBottomSheetSelectorModel>) onComplete;

  const BaseBottomSheetMultipleTemplate({Key key, @required this.controller, @required this.onComplete}) : super(key: key);
  @override
  _BaseBottomSheetMultipleTemplateState createState() => _BaseBottomSheetMultipleTemplateState();
}

class _BaseBottomSheetMultipleTemplateState extends State<BaseBottomSheetMultipleTemplate> {
  /// 数据源
  List<BaseBottomSheetSelectorModel> get items => widget.controller.items;

  /// 提示语
  String get hit => widget.controller.hit;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 16, right: 16, bottom: 8),
      child: Column(
        children: [
          BottomSheetHead(hit: hit),
          Expanded(child: buildBody()),
          BaseBottomSheetButtonBar(
            cancelText: '重置',
            onComplete: () {
              Navigator.of(context, rootNavigator: true).pop();
              if (widget.onComplete != null) {
                widget.onComplete(widget.controller.selected);
              }
            },
            onCancel: () {
              widget.controller.resetSelected();
              setState(() {});
            },
          ),
        ],
      ),
    );
  }

  /// 主数据
  Widget buildBody() {
    return ListView.builder(
      shrinkWrap: true,
      itemBuilder: (context, index) => _buildItem(items[index]),
      itemExtent: 49,
      itemCount: items.length,
    );
  }

  /// 创建每行 item
  Widget _buildItem(BaseBottomSheetSelectorModel item) {
    bool isSelected = widget.controller.isSelected(item);
    return Container(
      height: 49,
      child: Column(
        children: [
          MultipleSelectorTile(item: item, isSelected: isSelected, onChange: _onChange),
          BaseComponentUtils.buildHorizontalDivider(),
        ],
      ),
    );
  }

  void _onChange(BaseBottomSheetSelectorModel v) {
    widget.controller.changeSelected(v);
  }
}

/// 默认模板 Tile
class MultipleSelectorTile extends StatefulWidget {
  final bool isSelected;
  final BaseBottomSheetSelectorModel item;
  final Function(BaseBottomSheetSelectorModel) onChange;

  const MultipleSelectorTile({Key key, @required this.isSelected, @required this.item, @required this.onChange}) : super(key: key);
  @override
  _MultipleSelectorTileState createState() => _MultipleSelectorTileState();
}

class _MultipleSelectorTileState extends State<MultipleSelectorTile> {
  bool _isSelected;
  @override
  void initState() {
    _isSelected = widget.isSelected;
    super.initState();
  }

  @override
  void didUpdateWidget(covariant MultipleSelectorTile oldWidget) {
    _isSelected = widget.isSelected;
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() => {_isSelected = !_isSelected});
        widget.onChange(widget.item);
      },
      child: Container(
        height: 48,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(child: Text(widget.item.value, softWrap: false, maxLines: 1, overflow: TextOverflow.ellipsis)),
            Container(alignment: Alignment.center, child: BaseCustomCheckboxButton.tile(checked: _isSelected, disable: true)),
          ],
        ),
      ),
    );
  }
}
